<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MBTI测试 - 答题</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/css/question.css">
    <link rel="stylesheet" href="/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 添加顶部标题 -->
        <div class="question-header">
            <div class="header-title">
                <h1>MBTI性格测试-{$info.title}</h1>
                <span class="question-total">共{$info.num}</span>
            </div>
            <div class="test-instructions">
                <div class="instruction-item">
                    <i class="fas fa-clock"></i>
                    <span>预计用时：15-20分钟</span>
                </div>
                <div class="instruction-item">
                    <i class="fas fa-check-circle"></i>
                    <span>选择最符合自己的选项（即使你不喜欢这个答案）</span>
                </div>
                <div class="instruction-item">
                    <i class="fas fa-heart"></i>
                    <span>请放松心情作答，答题后会生成测评报告！</span>
                </div>
            </div>
        </div>

        <div class="question-container">
            <!-- 进度条 -->
            <div class="progress-container">
                <div class="progress-bar">
                    <div class="progress" style="width: 0%"></div>
                </div>
                <div class="progress-text">0% (0/0题)</div>
            </div>

            <!-- 问题卡片 -->
            <div class="question-card">
                <h2 class="question-number"></h2>
                <p class="question-text"></p>

                <!-- 选项 -->
                <div class="options-container">
                    <button class="option-btn" value="">
                        <span class="option-text"></span>
                    </button>
                    <button class="option-btn" value="">
                        <span class="option-text"></span>
                    </button>
                </div>
            </div>

            <!-- 导航按钮 -->
            <div class="navigation-buttons">
                <button class="nav-btn prev-btn" disabled>
                    <i class="fas fa-arrow-left"></i> 上一题
                </button>
                <button class="nav-btn next-btn" style="display: none;">
                    下一题 <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
    </div>
  
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/sweetalert2.js"></script>
    <script src="/js/question.js"></script>
    <script>
    $(document).ready(function() {
            // 为选项按钮添加点击事件
            $('.options-container').on('click', '.option-btn', function() {
                // 移除所有选项的选中状态
                $('.option-btn').removeClass('selected');
                // 添加当前选项的选中状态
                $(this).addClass('selected');
                
                // 短暂延迟后自动进入下一题
                setTimeout(function() {
                    // 触发下一题按钮的点击事件
                    $('.next-btn').click();
                }, 300); // 300毫秒的延迟，让用户能看到选中效果
            });
        });
    </script>
    <script>
       $(document).ready(function() {
        let clickTimes = []; // 记录点击时间的数组
        const MAX_CLICKS = 4; // 1秒内最大点击次数
        const TIME_WINDOW = 1000; // 1秒的时间窗口
        
        // 为选项按钮添加点击事件
        $('.options-container').on('click', '.option-btn', function(event) {
            const currentTime = new Date().getTime();
            
            // 清理超过1秒的点击记录
            clickTimes = clickTimes.filter(time => currentTime - time < TIME_WINDOW);
            
            // 检查1秒内的点击次数
            if (clickTimes.length >= MAX_CLICKS) {
                event.preventDefault();
                Swal.fire({
                    icon: 'warning',
                    title: '答题过快',
                    text: '请认真思考后再选择答案',
                    timer: 1500,
                    showConfirmButton: false
                });
                return;
            }
            
            // 记录这次点击的时间
            clickTimes.push(currentTime);
            
            // 原有的选项处理逻辑
            $('.option-btn').removeClass('selected');
            $(this).addClass('selected');
            
            // 延迟后自动进入下一题
            setTimeout(function() {
                $('.next-btn').click();
            }, 300);
        });
    });
    </script>
</body>
</html>